<template>
  <div>
      <div id="div1">
          <div id="div2">
              <div>
                <div id="div3"><span>你好！</span><img src="https://pic1.imgdb.cn/item/635ca86816f2c2beb14bb0c0.png"></div>
                <div id="div4"><span>canwin999</span> 同学</div>
              </div>
              <div id="div5"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F87%2Fe4%2F64%2F87e464be0c2e0a37c031541505ec3f2f.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668392472&t=7a765e9e541c2307d70c7d80b0b0c0bb" alt=""></div>
          </div>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
#div1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius:10px 10px 0 0;
    width: 92vw;
    height: 13vh;
    padding: 0 2vw;
    margin-top: 1vh;
    background-color: rgb(117, 126, 177);
    letter-spacing: 1px;
    #div2{
        width: 96vw;
        display: flex;
        text-align: left;
        // margin-left: 20px;
        justify-content: space-between;
        color: rgb(255, 255, 255);

        #div3{
            display: flex;
            align-content: space-around;
            font-size: 15px;
            line-height: 30px;
            letter-spacing: 2px;
            img{
                height: 28px;
                width: 31px;
                margin-left: -2vw;
            }
        }
        #div4{
            font-size: 21px;
            font-weight: bold;
            img{
                height: 30px;
                width: 30px;
            }
        }
        #div5{
            border-radius: 50%;
            width: 50px;
            height: 50px;
            background-color: rgb(255, 255, 255);
            img{
            border-radius: 50%;
                width: 50px;
                height: 50px;
            }
        }
    }
}

</style>